ಚಿತ್ರಗಳು ಮತ್ತು ಇತರ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡಲು CSS @lazy ಯ ಶಕ್ತಿಯನ್ನು ಅನ್ವೇಷಿಸಿ, ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೆಚ್ಚಿಸಿ ಮತ್ತು ಜಾಗತಿಕವಾಗಿ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಿ.
CSS @lazy: ಲೇಜಿ ಲೋಡಿಂಗ್ ಮೂಲಕ ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುವುದು
ವೆಬ್ ಡೆವಲಪ್ಮೆಂಟ್‌ನ ನಿರಂತರವಾಗಿ ಬದಲಾಗುತ್ತಿರುವ ಕ್ಷೇತ್ರದಲ್ಲಿ, ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುವುದು ಬಹಳ ಮುಖ್ಯವಾಗಿದೆ. ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ವೆಬ್‌ಸೈಟ್ ಬಳಕೆದಾರರಿಗೆ ನಿರಾಶೆಯನ್ನುಂಟುಮಾಡಬಹುದು, ಹೆಚ್ಚಿನ ಬೌನ್ಸ್ ದರಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು ಮತ್ತು ಅಂತಿಮವಾಗಿ ನಿಮ್ಮ ವ್ಯವಹಾರದ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು. ವೆಬ್‌ಸೈಟ್‌ನ ವೇಗ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ ತಂತ್ರಗಳಲ್ಲಿ ಒಂದು ಲೇಜಿ ಲೋಡಿಂಗ್. ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆಯಾದರೂ, ಹೊಸದಾಗಿ ಬರುತ್ತಿರುವ CSS @lazy at-rule ಒಂದು ಶಕ್ತಿಯುತ ಮತ್ತು ಸರಳ ಪರಿಹಾರವನ್ನು ನೀಡುತ್ತದೆ. ಈ ಲೇಖನವು CSS @lazy ಯ ಸಂಕೀರ್ಣತೆಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ, ಅದರ ಪ್ರಯೋಜನಗಳು, ಅನುಷ್ಠಾನ ಮತ್ತು ಜಾಗತಿಕ ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಅದರ ಸಂಭಾವ್ಯ ಪರಿಣಾಮವನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.
ಲೇಜಿ ಲೋಡಿಂಗ್ ಎಂದರೇನು?
ಲೇಜಿ ಲೋಡಿಂಗ್ ಎನ್ನುವುದು ಚಿತ್ರಗಳು, ವೀಡಿಯೊಗಳು ಮತ್ತು ಐಫ್ರೇಮ್‌ಗಳಂತಹ ಮುಖ್ಯವಲ್ಲದ ಸಂಪನ್ಮೂಲಗಳ ಲೋಡಿಂಗ್ ಅನ್ನು ಅವುಗಳು ನಿಜವಾಗಿಯೂ ಅಗತ್ಯವಿರುವವರೆಗೆ ಮುಂದೂಡುವ ತಂತ್ರವಾಗಿದೆ. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ಈ ಸಂಪನ್ಮೂಲಗಳು ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ಗೆ ಬಂದಾಗ ಅಥವಾ ಬಳಕೆದಾರರಿಗೆ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಹಂತದಲ್ಲಿದ್ದಾಗ ಮಾತ್ರ ಲೋಡ್ ಆಗುತ್ತವೆ. ಈ ವಿಧಾನವು ಆರಂಭಿಕ ಪೇಜ್ ಲೋಡ್ ಸಮಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಏಕೆಂದರೆ ಬ್ರೌಸರ್ ತಕ್ಷಣವೇ ಅಗತ್ಯವಿಲ್ಲದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ರೆಂಡರ್ ಮಾಡಬೇಕಾಗಿಲ್ಲ.
ದೀರ್ಘ ಚಿತ್ರಗಳ ಪಟ್ಟಿಯನ್ನು ಹೊಂದಿರುವ ವೆಬ್‌ಪೇಜ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಲೇಜಿ ಲೋಡಿಂಗ್ ಇಲ್ಲದಿದ್ದರೆ, ಬ್ರೌಸರ್ ಎಲ್ಲಾ ಚಿತ್ರಗಳನ್ನು ಒಂದೇ ಬಾರಿಗೆ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ, ಪುಟದ ಕೆಳಭಾಗದಲ್ಲಿರುವ ಮತ್ತು ಇನ್ನೂ ಕಾಣಿಸದ ಚಿತ್ರಗಳನ್ನೂ ಸಹ. ಇದು ಆರಂಭಿಕ ಪೇಜ್ ಲೋಡ್ ಅನ್ನು ಗಮನಾರ್ಹವಾಗಿ ನಿಧಾನಗೊಳಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ಸೀಮಿತ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಅಥವಾ ಸಂಸ್ಕರಣಾ ಶಕ್ತಿಯನ್ನು ಹೊಂದಿರುವ ಸಾಧನಗಳಲ್ಲಿ. ಲೇಜಿ ಲೋಡಿಂಗ್‌ನೊಂದಿಗೆ, ಆರಂಭದಲ್ಲಿ ಗೋಚರಿಸುವ ಚಿತ್ರಗಳನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ, ಉಳಿದ ಚಿತ್ರಗಳನ್ನು ಬಳಕೆದಾರರು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಾಗ ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ.
ಲೇಜಿ ಲೋಡಿಂಗ್‌ನ ಪ್ರಯೋಜನಗಳು
ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದರಿಂದ ಹಲವಾರು ಪ್ರಯೋಜನಗಳಿವೆ, ಅವುಗಳೆಂದರೆ:
- ಸುಧಾರಿತ ಪೇಜ್ ಲೋಡ್ ಸಮಯ: ಮುಖ್ಯವಲ್ಲದ ಸಂಪನ್ಮೂಲಗಳ ಲೋಡಿಂಗ್ ಅನ್ನು ಮುಂದೂಡುವುದರಿಂದ, ಲೇಜಿ ಲೋಡಿಂಗ್ ಆರಂಭಿಕ ಪೇಜ್ ಲೋಡ್ ಸಮಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ವೇಗವಾದ ಮತ್ತು ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ.
- ಕಡಿಮೆ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಬಳಕೆ: ಲೇಜಿ ಲೋಡಿಂಗ್ ನಿಜವಾಗಿಯೂ ಅಗತ್ಯವಿರುವ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಅನ್ನು ಉಳಿಸುತ್ತದೆ, ಇದು ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಅಥವಾ ಸೀಮಿತ ಡೇಟಾ ಯೋಜನೆಗಳನ್ನು ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ವಿಶೇಷವಾಗಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ.
- ಹೆಚ್ಚಿದ ಬಳಕೆದಾರರ ಅನುಭವ: ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುವ ವೆಬ್‌ಸೈಟ್ ಸುಗಮ ಮತ್ತು ಹೆಚ್ಚು ಆನಂದದಾಯಕ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ, ಇದು ಹೆಚ್ಚಿನ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆ ಮತ್ತು ಕಡಿಮೆ ಬೌನ್ಸ್ ದರಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
- ಸುಧಾರಿತ ಎಸ್‌ಇಒ: ಗೂಗಲ್‌ನಂತಹ ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳು ಪೇಜ್ ಲೋಡ್ ವೇಗವನ್ನು ಶ್ರೇಯಾಂಕದ ಅಂಶವಾಗಿ ಪರಿಗಣಿಸುತ್ತವೆ. ಲೇಜಿ ಲೋಡಿಂಗ್‌ನೊಂದಿಗೆ ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಸರ್ಚ್ ಇಂಜಿನ್ ಶ್ರೇಯಾಂಕಗಳನ್ನು ಸುಧಾರಿಸಬಹುದು.
- ಕಡಿಮೆಯಾದ ಸರ್ವರ್ ಲೋಡ್: ವಿನಂತಿಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ವರ್ಗಾಯಿಸಲಾದ ಡೇಟಾವನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ, ಲೇಜಿ ಲೋಡಿಂಗ್ ನಿಮ್ಮ ಸರ್ವರ್ ಮೇಲಿನ ಹೊರೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಅದರ ಒಟ್ಟಾರೆ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸ್ಕೇಲೆಬಿಲಿಟಿಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
CSS @lazy: ಲೇಜಿ ಲೋಡಿಂಗ್‌ಗೆ ಒಂದು ಹೊಸ ವಿಧಾನ
ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತಿತ್ತು, ಸಂಪನ್ಮೂಲಗಳು ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ಗೆ ಹತ್ತಿರವಾದಾಗ ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಅವುಗಳ ಲೋಡಿಂಗ್ ಅನ್ನು ಪ್ರಚೋದಿಸಲು ಲೈಬ್ರರಿಗಳು ಅಥವಾ ಕಸ್ಟಮ್ ಕೋಡ್ ಅನ್ನು ಅವಲಂಬಿಸಲಾಗುತ್ತಿತ್ತು. ಆದಾಗ್ಯೂ, ಹೊಸದಾಗಿ ಬರುತ್ತಿರುವ CSS @lazy at-rule ಲೇಜಿ ಲೋಡಿಂಗ್‌ಗೆ ಒಂದು ಸ್ಥಳೀಯ ಮತ್ತು ಹೆಚ್ಚು ಘೋಷಣಾತ್ಮಕ ವಿಧಾನವನ್ನು ನೀಡುತ್ತದೆ, ಅನೇಕ ಸಂದರ್ಭಗಳಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುತ್ತದೆ.
ಒಂದು ನಿರ್ದಿಷ್ಟ ಷರತ್ತು ಪೂರೈಸಿದಾಗ, ಉದಾಹರಣೆಗೆ ಒಂದು ಎಲಿಮೆಂಟ್ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನೊಳಗೆ ಇದ್ದಾಗ, ಕೆಲವು CSS ನಿಯಮಗಳನ್ನು ಮಾತ್ರ ಅನ್ವಯಿಸಬೇಕು ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು @lazy at-rule ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಸಂಪನ್ಮೂಲಗಳ ಲೋಡಿಂಗ್ ಅಥವಾ ಶೈಲಿಗಳ ಅನ್ವಯವನ್ನು ಅವು ನಿಜವಾಗಿಯೂ ಅಗತ್ಯವಿರುವವರೆಗೆ ಮುಂದೂಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನೇರವಾಗಿ CSS ನಲ್ಲಿ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ.
CSS @lazy ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
@lazy at-rule ಸಾಮಾನ್ಯವಾಗಿ intersection-observer API ಯೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಇದು ಒಂದು ಎಲಿಮೆಂಟ್ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅಥವಾ ಇನ್ನೊಂದು ಎಲಿಮೆಂಟ್‌ನೊಂದಿಗೆ ಸಂಧಿಸಿದಾಗ ಪತ್ತೆಹಚ್ಚಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. @lazy at-rule ಒಳಗೊಂಡಿರುವ CSS ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ಪೂರೈಸಬೇಕಾದ ಷರತ್ತನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಆದರೆ intersection-observer API ಎಲಿಮೆಂಟ್‌ನ ಗೋಚರತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಷರತ್ತು ಪೂರೈಸಿದಾಗ ನಿಯಮಗಳ ಅನ್ವಯವನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.
ಒಂದು ಚಿತ್ರವನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡಲು CSS @lazy ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದಕ್ಕೆ ಇಲ್ಲಿದೆ ಒಂದು ಮೂಲ ಉದಾಹರಣೆ:
@lazy (intersection-observer: root margin: 50px) {
.lazy-image {
background-image: url('image.jpg');
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, @lazy at-rule ಬ್ಲಾಕ್‌ನೊಳಗಿನ CSS ನಿಯಮಗಳನ್ನು lazy-image ಕ್ಲಾಸ್ ಹೊಂದಿರುವ ಎಲಿಮೆಂಟ್ 50px ಅಂಚಿನೊಂದಿಗೆ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನೊಂದಿಗೆ ಸಂಧಿಸಿದಾಗ ಮಾತ್ರ ಅನ್ವಯಿಸಬೇಕು ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಎಲಿಮೆಂಟ್ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನೊಳಗೆ ಬಂದಾಗ, background-image ಪ್ರಾಪರ್ಟಿಯನ್ನು ಚಿತ್ರದ URL ಗೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ, ಅದರ ಲೋಡಿಂಗ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.
@lazy ಗಾಗಿ ಬ್ರೌಸರ್ ಬೆಂಬಲ
2024 ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, `@lazy` ಗಾಗಿ ನೇರ ಬೆಂಬಲ ಇನ್ನೂ ಪ್ರಾಯೋಗಿಕ ಹಂತದಲ್ಲಿದೆ. ಪ್ರೊಡಕ್ಷನ್ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗಾಗಿ ಇದನ್ನು ಅವಲಂಬಿಸುವ ಮೊದಲು ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಕೋಷ್ಟಕಗಳನ್ನು (ಉದಾಹರಣೆಗೆ Can I Use ನಲ್ಲಿರುವಂತಹವು) ಪರಿಶೀಲಿಸುವುದು ಬಹಳ ಮುಖ್ಯ. ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪಾಲಿಫಿಲ್‌ಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಅಗತ್ಯವಾಗಿರುತ್ತದೆ.
CSS @lazy ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು: ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು
ವಿವಿಧ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಿಗಾಗಿ CSS @lazy ಅನ್ನು ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.
ಚಿತ್ರಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡುವುದು
ಹಿಂದಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ತೋರಿಸಿದಂತೆ, ಎಲಿಮೆಂಟ್ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನೊಳಗೆ ಇದ್ದಾಗ background-image ಪ್ರಾಪರ್ಟಿಯನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ ಚಿತ್ರಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡಲು CSS @lazy ಅನ್ನು ಬಳಸಬಹುದು.
ಇಲ್ಲಿದೆ ಒಂದು ಹೆಚ್ಚು ಸಂಪೂರ್ಣ ಉದಾಹರಣೆ:
.lazy-image {
width: 300px;
height: 200px;
background-color: #eee;
background-size: cover;
background-position: center;
}
@lazy (intersection-observer: root margin: 100px) {
.lazy-image {
background-image: url('image.jpg');
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು lazy-image ಎಲಿಮೆಂಟ್‌ಗಾಗಿ ಆರಂಭಿಕ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ, ಅದರ ಅಗಲ, ಎತ್ತರ, ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಮತ್ತು ಹಿನ್ನೆಲೆ ಗಾತ್ರ ಸೇರಿದಂತೆ. ನಂತರ @lazy at-rule ಎಲಿಮೆಂಟ್ 100px ಅಂಚಿನೊಂದಿಗೆ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನೊಳಗೆ ಬಂದಾಗ ಮಾತ್ರ background-image ಪ್ರಾಪರ್ಟಿಯನ್ನು ಹೊಂದಿಸಬೇಕು ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
ಐಫ್ರೇಮ್‌ಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡುವುದು
ಎಂಬೆಡ್ ಮಾಡಿದ ಯೂಟ್ಯೂಬ್ ವೀಡಿಯೊಗಳು ಅಥವಾ ನಕ್ಷೆಗಳಂತಹ ಐಫ್ರೇಮ್‌ಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡಲು ಸಹ CSS @lazy ಅನ್ನು ಬಳಸಬಹುದು. ಆರಂಭದಲ್ಲಿ ಐಫ್ರೇಮ್ ಅನ್ನು ಮರೆಮಾಡಿ ಮತ್ತು ಅದು ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನೊಳಗೆ ಬಂದಾಗ ಮಾತ್ರ ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಆರಂಭಿಕ ಪೇಜ್ ಲೋಡ್ ಸಮಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು.
ಇಲ್ಲಿದೆ ಒಂದು ಉದಾಹರಣೆ:
.lazy-iframe {
width: 640px;
height: 360px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
@lazy (intersection-observer: root margin: 200px) {
.lazy-iframe {
opacity: 1;
src: url('https://www.youtube.com/embed/VIDEO_ID');
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಆರಂಭದಲ್ಲಿ lazy-iframe ಎಲಿಮೆಂಟ್‌ನ opacity ಅನ್ನು 0 ಗೆ ಹೊಂದಿಸುತ್ತೇವೆ, ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಅದನ್ನು ಮರೆಮಾಡುತ್ತೇವೆ. ನಂತರ @lazy at-rule ಎಲಿಮೆಂಟ್ 200px ಅಂಚಿನೊಂದಿಗೆ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನೊಳಗೆ ಬಂದಾಗ opacity ಅನ್ನು 1 ಗೆ ಮತ್ತು src ಗುಣಲಕ್ಷಣವನ್ನು ಐಫ್ರೇಮ್‌ನ URL ಗೆ ಹೊಂದಿಸಬೇಕು ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. transition ಪ್ರಾಪರ್ಟಿಯು ಐಫ್ರೇಮ್ ಲೋಡ್ ಆದಾಗ ಒಂದು ಸುಗಮ ಫೇಡ್-ಇನ್ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
ಸಂಕೀರ್ಣ CSS ಆನಿಮೇಷನ್‌ಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡುವುದು
ಕೆಲವೊಮ್ಮೆ, ಸಂಕೀರ್ಣ CSS ಆನಿಮೇಷನ್‌ಗಳು ಪುಟದ ಆರಂಭಿಕ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. `@lazy` ಬಳಸಿ, ಈ ಆನಿಮೇಷನ್‌ಗಳ ಅನ್ವಯವನ್ನು ಅವು ಪರಿಣಾಮ ಬೀರುವ ಎಲಿಮೆಂಟ್ ಗೋಚರಿಸುವ ಹಂತಕ್ಕೆ ಬರುವವರೆಗೆ ಮುಂದೂಡಬಹುದು.
.animated-element {
/* Initial styles */
opacity: 0;
transform: translateY(50px);
transition: all 0.5s ease;
}
@lazy (intersection-observer: root margin: 100px) {
.animated-element {
opacity: 1;
transform: translateY(0);
}
}
ಈ ಉದಾಹರಣೆಯು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಆರಂಭದಲ್ಲಿ 50px ಕೆಳಗೆ ಸರಿಸುತ್ತದೆ. ಎಲಿಮೆಂಟ್ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ಗೆ ಹತ್ತಿರವಾದಾಗ `@lazy` ನಿಯಮವು ಆನಿಮೇಷನ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ, ಅದನ್ನು ಸುಗಮವಾಗಿ ವೀಕ್ಷಣೆಗೆ ತರುತ್ತದೆ.
CSS @lazy vs. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಲೇಜಿ ಲೋಡಿಂಗ್
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಲೇಜಿ ಲೋಡಿಂಗ್ ಹಲವು ವರ್ಷಗಳಿಂದ ಪ್ರಮಾಣಿತ ವಿಧಾನವಾಗಿದ್ದರೂ, CSS @lazy ಹಲವಾರು ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ:
- ಸರಳೀಕೃತ ಅನುಷ್ಠಾನ: CSS
@lazyಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಹೆಚ್ಚು ಘೋಷಣಾತ್ಮಕ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಅಗತ್ಯವಿರುವ ಕೋಡ್‌ನ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಒಟ್ಟಾರೆ ಅನುಷ್ಠಾನವನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. - ಸುಧಾರಿತ ಕಾರ್ಯಕ್ಷಮತೆ: ಲೇಜಿ ಲೋಡಿಂಗ್ ತರ್ಕವನ್ನು ಬ್ರೌಸರ್‌ನ ರೆಂಡರಿಂಗ್ ಇಂಜಿನ್‌ಗೆ ವರ್ಗಾಯಿಸುವ ಮೂಲಕ, CSS
@lazyಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಪರಿಹಾರಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ಸಂಭಾವ್ಯವಾಗಿ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀಡಬಲ್ಲದು. - ಕಡಿಮೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅವಲಂಬನೆ: CSS
@lazyಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೇಲಿನ ಅವಲಂಬನೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಬಳಕೆದಾರರಿಗೆ ಅಥವಾ ಸೀಮಿತ ಸಂಸ್ಕರಣಾ ಶಕ್ತಿಯನ್ನು ಹೊಂದಿರುವ ಸಾಧನಗಳಿಗೆ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ.
ಆದಾಗ್ಯೂ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಲೇಜಿ ಲೋಡಿಂಗ್ ಸಹ ತನ್ನದೇ ಆದ ಪ್ರಯೋಜನಗಳನ್ನು ಹೊಂದಿದೆ:
- ವ್ಯಾಪಕ ಬ್ರೌಸರ್ ಬೆಂಬಲ: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಪರಿಹಾರಗಳು ಸಾಮಾನ್ಯವಾಗಿ ವ್ಯಾಪಕ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ನೀಡುತ್ತವೆ, ಏಕೆಂದರೆ ಅವುಗಳನ್ನು ಪಾಲಿಫಿಲ್‌ಗಳು ಅಥವಾ ಶಿಮ್‌ಗಳನ್ನು ಬಳಸಿ ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು.
- ಹೆಚ್ಚು ನಿಯಂತ್ರಣ ಮತ್ತು ನಮ್ಯತೆ: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೇಜಿ ಲೋಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯ ಮೇಲೆ ಹೆಚ್ಚು ನಿಯಂತ್ರಣ ಮತ್ತು ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಕಸ್ಟಮ್ ತರ್ಕವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಮತ್ತು ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶಗಳನ್ನು ನಿಭಾಯಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಅಂತಿಮವಾಗಿ, CSS @lazy ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಲೇಜಿ ಲೋಡಿಂಗ್ ನಡುವಿನ ಆಯ್ಕೆಯು ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅವಶ್ಯಕತೆಗಳು ಮತ್ತು ನೀವು ಒದಗಿಸಬೇಕಾದ ಬ್ರೌಸರ್ ಬೆಂಬಲದ ಮಟ್ಟವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಅನೇಕ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಹೈಬ್ರಿಡ್ ವಿಧಾನವು ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿಯಾಗಿರಬಹುದು, ಸರಳ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ CSS @lazy ಬಳಸುವುದು ಮತ್ತು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಪ್ರಕರಣಗಳಿಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವುದು.
ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
ನೀವು ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತೀರೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:
- ಅಬವ್-ದ-ಫೋಲ್ಡ್ ವಿಷಯಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಿ: ಆರಂಭಿಕ ಪೇಜ್ ಲೋಡ್‌ನಲ್ಲಿ ಗೋಚರಿಸುವ ಎಲ್ಲಾ ವಿಷಯವನ್ನು ಲೇಜಿ ಲೋಡಿಂಗ್ ಇಲ್ಲದೆ ತಕ್ಷಣವೇ ಲೋಡ್ ಮಾಡಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ವೇಗವಾದ ಮತ್ತು ಸ್ಪಂದಿಸುವ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.
- ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವನ್ನು ಬಳಸಿ: ಲೇಜಿ-ಲೋಡ್ ಮಾಡಿದ ಸಂಪನ್ಮೂಲಗಳಿಗಾಗಿ, ಉದಾಹರಣೆಗೆ ಚಿತ್ರಗಳು ಅಥವಾ ಐಫ್ರೇಮ್‌ಗಳು, ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವನ್ನು ಒದಗಿಸಿ, ಸಂಪನ್ಮೂಲಗಳು ಲೋಡ್ ಆದಾಗ ಪುಟವು ಶಿಫ್ಟ್ ಆಗುವುದನ್ನು ಅಥವಾ ಜಿಗಿಯುವುದನ್ನು ತಡೆಯಲು. ಇದನ್ನು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಚಿತ್ರ ಅಥವಾ ಸರಳ CSS ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬಳಸಿ ಸಾಧಿಸಬಹುದು.
- ಚಿತ್ರಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಸಂಕುಚಿತಗೊಳಿಸುವ ಮೂಲಕ ಮತ್ತು ಸೂಕ್ತವಾದ ಫೈಲ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ ವೆಬ್‌ಗಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ. ಇದು ಫೈಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಲೋಡಿಂಗ್ ವೇಗವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. ಇಮೇಜ್ಆಪ್ಟಿಮ್ (macOS) ಅಥವಾ ಟೈನಿಪಿಎನ್‌ಜಿಯಂತಹ ಉಪಕರಣಗಳು ಅಮೂಲ್ಯವಾಗಿರಬಹುದು.
- ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನುಷ್ಠಾನವು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ. ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮತ್ತು ಯಾವುದೇ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
- ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ನಿಮ್ಮ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನುಷ್ಠಾನವು ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಚಿತ್ರಗಳಿಗೆ ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು ಒದಗಿಸಿ ಮತ್ತು ಲೇಜಿ-ಲೋಡ್ ಮಾಡಿದ ವಿಷಯವನ್ನು ಸರಿಯಾಗಿ ಲೇಬಲ್ ಮಾಡಲಾಗಿದೆಯೆ ಮತ್ತು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಂದ ಕಂಡುಹಿಡಿಯಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ: ನಿಮ್ಮ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನುಷ್ಠಾನದಲ್ಲಿನ ಯಾವುದೇ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಿರಂತರವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ. ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯಲು ಮತ್ತು ಸುಧಾರಣೆಯ ಕ್ಷೇತ್ರಗಳನ್ನು ಗುರುತಿಸಲು ಗೂಗಲ್ ಪೇಜ್‌ಸ್ಪೀಡ್ ಇನ್‌ಸೈಟ್ಸ್ ಅಥವಾ ವೆಬ್‌ಪೇಜ್‌ಟೆಸ್ಟ್‌ನಂತಹ ಉಪಕರಣಗಳನ್ನು ಬಳಸಿ.
CSS @lazy ಯ ಭವಿಷ್ಯ
CSS @lazy ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ನಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಹೆಜ್ಜೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಒಂದು ಸ್ಥಳೀಯ ಮತ್ತು ಹೆಚ್ಚು ಘೋಷಣಾತ್ಮಕ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ. @lazy ಗಾಗಿ ಬ್ರೌಸರ್ ಬೆಂಬಲ ಸುಧಾರಿಸಿದಂತೆ, ವೆಬ್‌ಸೈಟ್ ವೇಗ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಇದು ಹೆಚ್ಚು ವ್ಯಾಪಕವಾಗಿ ಅಳವಡಿಸಿಕೊಳ್ಳುವ ತಂತ್ರವಾಗುವ ಸಾಧ್ಯತೆಯಿದೆ. ಪೂರ್ಣ, ಪ್ರಮಾಣಿತ ಅನುಷ್ಠಾನ ಇನ್ನೂ ದೂರವಿದ್ದರೂ, ವೆಬ್ ಡೆವಲಪ್ಮೆಂಟ್‌ನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಲ್ಲಿ ಮುಂದಿರಲು ಅದರ ಅಭಿವೃದ್ಧಿಯ ಮೇಲೆ ಕಣ್ಣಿಡುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.
@lazy ಯ ಸಾಮರ್ಥ್ಯವು ಸರಳ ಚಿತ್ರ ಮತ್ತು ಐಫ್ರೇಮ್ ಲೋಡಿಂಗ್ ಅನ್ನು ಮೀರಿದೆ. ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳು ಅಥವಾ ಸಾಧನದ ಸಾಮರ್ಥ್ಯಗಳ ಆಧಾರದ ಮೇಲೆ ಸಂಪೂರ್ಣ CSS ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಇದನ್ನು ಬಳಸುವುದನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಸಂಪನ್ಮೂಲ ವಿತರಣೆಯನ್ನು ಮತ್ತಷ್ಟು ಉತ್ತಮಗೊಳಿಸುತ್ತದೆ. ಸಂಪನ್ಮೂಲ ಲೋಡಿಂಗ್ ಮೇಲಿನ ಈ ಮಟ್ಟದ ವಿವರವಾದ ನಿಯಂತ್ರಣವು ನಾವು ಕಾರ್ಯಕ್ಷಮತೆಯ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ವಿಧಾನವನ್ನು ಕ್ರಾಂತಿಗೊಳಿಸಬಹುದು.
ಲೇಜಿ ಲೋಡಿಂಗ್‌ಗಾಗಿ ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು
ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ, ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯ:
- ಬದಲಾಗುವ ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳು: ವಿವಿಧ ಪ್ರದೇಶಗಳಲ್ಲಿ ನೆಟ್‌ವರ್ಕ್ ವೇಗ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹತೆ ಗಮನಾರ್ಹವಾಗಿ ಬದಲಾಗಬಹುದು. ನಿಧಾನ ಅಥವಾ ವಿಶ್ವಾಸಾರ್ಹವಲ್ಲದ ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕಗಳಿರುವ ಪ್ರದೇಶಗಳಲ್ಲಿನ ಬಳಕೆದಾರರಿಗೆ ಲೇಜಿ ಲೋಡಿಂಗ್ ವಿಶೇಷವಾಗಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಬಹುದು.
- ಸಾಧನ ವೈವಿಧ್ಯತೆ: ಬಳಕೆದಾರರು ಹೈ-ಎಂಡ್ ಸ್ಮಾರ್ಟ್‌ಫೋನ್‌ಗಳಿಂದ ಹಿಡಿದು ಲೋ-ಎಂಡ್ ಫೀಚರ್ ಫೋನ್‌ಗಳವರೆಗೆ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧನಗಳಲ್ಲಿ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸುತ್ತಾರೆ. ಸೀಮಿತ ಸಂಸ್ಕರಣಾ ಶಕ್ತಿ ಅಥವಾ ಮೆಮೊರಿ ಹೊಂದಿರುವ ಸಾಧನಗಳಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಲೇಜಿ ಲೋಡಿಂಗ್ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
- ಕಂಟೆಂಟ್ ಡೆಲಿವರಿ ನೆಟ್‌ವರ್ಕ್‌ಗಳು (CDN ಗಳು): ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರಪಂಚದಾದ್ಯಂತ ಇರುವ ಸರ್ವರ್‌ಗಳಿಂದ ತಲುಪಿಸಲು CDN ಬಳಸಿ. ಇದು ಬಳಕೆದಾರರು ತಮಗೆ ಭೌಗೋಳಿಕವಾಗಿ ಹತ್ತಿರವಿರುವ ಸರ್ವರ್‌ನಿಂದ ವಿಷಯವನ್ನು ಸ್ವೀಕರಿಸುತ್ತಾರೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಲೇಟೆನ್ಸಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಲೋಡಿಂಗ್ ವೇಗವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
- ಭಾಷೆ ಮತ್ತು ಸ್ಥಳೀಕರಣ: ಸ್ಥಳೀಯ ವಿಷಯದ ಮೇಲೆ ಲೇಜಿ ಲೋಡಿಂಗ್‌ನ ಪರಿಣಾಮವನ್ನು ಪರಿಗಣಿಸಿ. ಸ್ಥಳೀಯ ಚಿತ್ರಗಳು ಮತ್ತು ಇತರ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸರಿಯಾಗಿ ಲೋಡ್ ಮಾಡಲಾಗಿದೆಯೆ ಮತ್ತು ವಿವಿಧ ಭಾಷೆಗಳು ಮತ್ತು ಪ್ರದೇಶಗಳಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವವು ಸ್ಥಿರವಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ತೀರ್ಮಾನ
CSS @lazy ಸ್ಥಳೀಯ ಲೇಜಿ ಲೋಡಿಂಗ್ ಮೂಲಕ ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಒಂದು ಭರವಸೆಯ ವಿಧಾನವನ್ನು ನೀಡುತ್ತದೆ. ಮುಖ್ಯವಲ್ಲದ ಸಂಪನ್ಮೂಲಗಳ ಲೋಡಿಂಗ್ ಅನ್ನು ಅವು ನಿಜವಾಗಿಯೂ ಅಗತ್ಯವಿರುವವರೆಗೆ ಮುಂದೂಡುವ ಮೂಲಕ, ನೀವು ಪೇಜ್ ಲೋಡ್ ಸಮಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು, ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು ಮತ್ತು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಬಹುದು. ಬ್ರೌಸರ್ ಬೆಂಬಲ ಇನ್ನೂ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದ್ದರೂ, @lazy ಯ ಸಂಭಾವ್ಯ ಪ್ರಯೋಜನಗಳು ಇದನ್ನು ಅನ್ವೇಷಿಸಲು ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಡೆವಲಪ್ಮೆಂಟ್ ವರ್ಕ್‌ಫ್ಲೋಗೆ ಸೇರಿಸಿಕೊಳ್ಳಲು ಯೋಗ್ಯವಾದ ತಂತ್ರವನ್ನಾಗಿ ಮಾಡುತ್ತದೆ. ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಆದ್ಯತೆ ನೀಡಲು, ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮತ್ತು ನಿಮ್ಮ ಬಳಕೆದಾರರ ಮತ್ತು ಅವರ ವೈವಿಧ್ಯಮಯ ಪರಿಸರಗಳ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳಿಗೆ ನಿಮ್ಮ ಅನುಷ್ಠಾನವನ್ನು ಹೊಂದಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ. ಲೇಜಿ ಲೋಡಿಂಗ್‌ನ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ಎಲ್ಲರಿಗೂ ವೇಗವಾದ, ಹೆಚ್ಚು ಸಮರ್ಥ ಮತ್ತು ಹೆಚ್ಚು ಆಕರ್ಷಕವಾದ ವೆಬ್ ಅನುಭವವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ.